body {
    width: 100vw;
    // background: url('https://cdn.staticaly.com/gh/china-wkz/wkzpng@blog.txit.top/20230129/wallhaven-y8pr1d.4j09vds27ym0.jpg') no-repeat top center;
    // background-size: (546.1333vmin / 1.5);
    background: linear-gradient(to right, #472323, #472523, #472e23, #473123, #473623, #5b2d2d, #2e2b2c, #1d1a1b, #2b3639, #24293f, #3e352b, #4d4134, #6e5a46, #34434d, #34384d, #3c344d, #4d343a);
    background-size: 1500% auto;
    animation: Gradient 25s ease infinite;
}

@keyframes Gradient {
    0% {
        background-position: 0% 50%;

    }

    10% {
        background-position: 10% 50%;

    }

    20% {
        background-position: 20% 50%;

    }

    30% {
        background-position: 30% 50%;

    }

    40% {
        background-position: 40% 50%;

    }

    50% {
        background-position: 50% 50%;

    }

    60% {
        background-position: 60% 50%;

    }

    70% {
        background-position: 70% 50%;

    }

    80% {
        background-position: 80% 50%;

    }

    90% {
        background-position: 90% 50%;

    }

    100% {
        background-position: 100% 50%;

    }

}

div {
    box-sizing: border-box;
}

p {
    margin: 0;
}

@keyframes tit {
    0% {
        filter: blur(26.6667vmin);
    }

    50% {
        filter: blur(13.3333vmin);

    }

    100% {
        filter: blur(0vmin);

    }
}

@-webkit-keyframes pulsate {
    0% {
        -webkit-transform: rotate(45deg) scale(0.8);
        transform: rotate(45deg) scale(0.8);
        transform: rotate(45deg) scale(0.8);
    }

    5% {
        -webkit-transform: rotate(45deg) scale(0.9);
        transform: rotate(45deg) scale(0.9);
    }

    10% {
        -webkit-transform: rotate(45deg) scale(0.8);
        transform: rotate(45deg) scale(0.8);
    }

    15% {
        -webkit-transform: rotate(45deg) scale(1);
        transform: rotate(45deg) scale(1);
    }

    50% {
        -webkit-transform: rotate(45deg) scale(0.8);
        transform: rotate(45deg) scale(0.8);
    }

    100% {
        -webkit-transform: rotate(45deg) scale(0.8);
        transform: rotate(45deg) scale(0.8);
    }
}

@keyframes pulsate {
    0% {
        -webkit-transform: rotate(45deg) scale(0.8);
        transform: rotate(45deg) scale(0.8);
        transform: rotate(45deg) scale(0.8);
    }

    5% {
        -webkit-transform: rotate(45deg) scale(0.9);
        transform: rotate(45deg) scale(0.9);
    }

    10% {
        -webkit-transform: rotate(45deg) scale(0.8);
        transform: rotate(45deg) scale(0.8);
    }

    15% {
        -webkit-transform: rotate(45deg) scale(1);
        transform: rotate(45deg) scale(1);
    }

    50% {
        -webkit-transform: rotate(45deg) scale(0.8);
        transform: rotate(45deg) scale(0.8);
    }

    100% {
        -webkit-transform: rotate(45deg) scale(0.8);
        transform: rotate(45deg) scale(0.8);
    }
}

.loading {
    width: 100%;
    height: 100%;
    z-index: 9999;
    pointer-events: none;
    position: fixed;
    top: 0;
    background-color: rgba(0, 0, 0, 0.84);

    span {
        position: absolute;
        top: 58.5%;
        left: (50%);
        transform: translateX(-50%);
        color: #fff;
        font-weight: 800;
        text-align: center;
        letter-spacing: .4vw;
    }

    // 加载动画
    .heart-loader {
        position: absolute;
        top: 50%;
        left: (43.5%);
        transform: translateY(-50%);
        background-color: #f44336;
        width: 13.3333vmin;
        height: 13.3333vmin;
        -webkite-transform: rotate(45deg);
        -webkit-transform: rotate(45deg);
        -ms-transform: rotate(45deg);
        transform: rotate(45deg);
        -webkit-animation: pulsate 1s infinite;
        animation: pulsate 1s infinite;
    }

    .heart-loader::before,
    .heart-loader::after {
        display: inline-block;
        content: "";
        width: 13.3333vmin;
        height: 13.3333vmin;
        background-color: #f44336;
        position: absolute;
        border-radius: 50%;
    }

    .heart-loader::before {
        top: 0px;
        left: -6.6667vmin;
    }

    .heart-loader::after {
        top: -6.6667vmin;
        left: -0px;
    }
}


// ***********************************************************
// 顶部
.top_title {
    .xing_name {
        width: 31.2vmin;
        // height: 13.4667vmin;
        margin: 13.2vmin auto;
        margin-bottom: 0;
        font-size: 9.6vmin;
        color: #ffffff;
        font-family: Microsoft YaHei, Microsoft YaHei-Bold;
        font-weight: 800;
        text-align: center;
        letter-spacing: .8vmin;
        // text-shadow: .1333vmin 1.3333vmin 1.2vmin rgba(255, 60, 0, 0.557);
        text-shadow: 0 0 20px yellow, 0 0 30px rgb(255, 30, 0), 0 0 40px yellow, 0 0 40px rgb(255, 115, 0), 0 0 40px rgb(255, 0, 0), 0 0 40px rgb(255, 145, 0), 0 0 40px rgb(0, 149, 255);
        animation: tit 2s, glow 2s ease-in-out infinite alternate;

    }
}

@keyframes glow {
    from {
        text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #00e6e6;
    }

    to {
        text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #ff7700;
    }
}

@keyframes bounce {
    0% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-5.3333vmin);
    }

    75% {
        transform: translateY(5.3333vmin);
    }

    100% {
        transform: translateY(0);
    }
}

@keyframes borderColor {
    0% {
        border-color: #ff3c00aa;
    }

    25% {
        border-color: #ffb300a8;
    }

    50% {
        border-color: #ffdd0086;
    }

    75% {
        border-color: #55ff009b;
    }

    100% {
        border-color: #00e1ff7e;
    }
}

@keyframes tits {
    0% {
        text-shadow: 0vmin .5vmin .8vmin #ff3c00aa;
    }

    25% {
        text-shadow: 0vmin .5vmin .8vmin #ffb300a8;
    }

    50% {
        text-shadow: 0vmin .5vmin .8vmin #ffdd0086;
    }

    75% {
        text-shadow: 0vmin .5vmin .8vmin #55ff009b;
    }

    100% {
        text-shadow: 0vmin .5vmin .8vmin #00e1ff7e;
    }
}

// 中间
.content {
    margin-top: 15.8667vmin;

    .content_box {
        display: flex;
        flex-direction: column;
        align-items: center;
        animation: tit 4s, bounce .5s 4s, borderColor 20s linear infinite;
        margin: 0 auto;
        padding: 8.7333vmin 3.5333vmin 8.8vmin;
        width: 89.2vmin;
        max-height: 116.4747vmin;
        background: rgba(0, 22, 47, 0.393);
        border: .6667vmin dashed #ff6000;
        border-radius: 2vmin;
        font-size: 1.8667vmin;
        font-family: Microsoft YaHei, Microsoft YaHei-Normal;
        font-weight: normal;
        text-align: CENTER;
        color: #333333;
        line-height: 2.6667vmin;


        .content_tit {

            font-size: 5.0667vmin;
            font-family: Microsoft YaHei, Microsoft YaHei-Normal;
            font-weight: normal;
            text-align: center;
            color: #ffffff;
            text-align: center;
            line-height: 2.6667vmin;
            // text-shadow: 0vmin .5vmin .8vmin #00ffe1;
            animation: tits 20s linear infinite;
        }

        .content_cont {
            margin-top: 5.4667vmin;
            width: 80vmin;
            font-size: 4.4vmin;
            font-family: Microsoft YaHei, Microsoft YaHei-Normal;
            font-weight: normal;
            text-align: left;
            color: #ffffff;
            line-height: 8.6667vmin;
            letter-spacing: 1vmin;
            text-shadow: 0vmin .4vmin .8vmin rgba(0, 255, 195, 0.86);
            padding-left: 5.3333vmin;
            overflow: scroll;
            overflow-x: hidden;
        }
    }
}

.yy {
    display: flex;
    margin-top: 10.1333vmin;
    margin-bottom: 25.3333vmin;
    justify-content: center;
    animation: tit 7.5s;

    .yy_cont {
        padding: 0;
        display: inline-block;
        max-width: 80vmin;
        font-size: 3.4667vmin;
        font-family: Microsoft YaHei, Microsoft YaHei-Normal;
        font-weight: normal;
        text-align: LEFT;
        color: #ffffff;
        letter-spacing: .8vmin;
        line-height: 5.3333vmin;
    }
}

// 设置
.set {
    .set_icon {
        position: fixed;
        bottom: 5vmin;
        right: 5.3333vmin;
        color: #ffffffc5;
        font-size: 8vmin;

    }

    .set_list {
        display: none;
        position: fixed;
        bottom: 17.1333vmin;
        right: 6.3333vmin;
        width: 50vmin;
        height: 72.2667vmin;
        background: rgba(0, 30, 36, 0.406);

        border: .1333vmin solid rgba(0, 159, 255, 0.42);
        padding: .9667vmin;
        overflow: scroll;
        overflow-x: hidden;
        padding-right: 0;

        // 默认的样式
        .list_items {
            display: flex;
            flex-direction: column;
            justify-content: center;
            margin-bottom: 0.2667vmin;
            width: 100%;
            height: 4.8vmin;
            background: rgba(0, 35, 60, 0.25);
            padding: 4.5333vmin 1.8667vmin;



            // 默认的样式
            .list_items_cont {
                width: 100%;
                font-size: 3.4vmin;
                font-family: Microsoft YaHei, Microsoft YaHei-Normal;
                font-weight: normal;
                text-align: LEFT;
                color: #a1a1a1;

            }
        }

        // 被选中的样式
        .list_items_ok {
            border-bottom: 0.2667vmin dashed #606000;
            margin-bottom: 0.2667vmin;
            width: 100%;
            height: 4.8vmin;
            background: rgba(0, 128, 107, 0.34);
            padding: 4.5333vmin 1.8667vmin;
            padding-left: 3.5vmin;
            overflow: hidden;
            border-radius: 4.3333vmin 0 0 4.3333vmin;


            // 被选中的样式
            .list_ok {
                width: 100%;
                font-size: 3.9vmin;
                font-family: Microsoft YaHei, Microsoft YaHei-Normal;
                font-weight: normal;
                text-align: LEFT;
                color: #ffffff;


            }
        }

    }
}

// 阶段性运势
.jdys {
    animation: tit 5s;

    ul {
        padding: 0;
        display: flex;
        width: (172.8vmin / 2);
        margin: 5.3333vmin auto 0 auto;
        text-align: center;
        font-size: 3vmin;

        // 默认的样式
        li {
            padding: 3vmin;
            color: #fff;
            flex-grow: 1;
            border-radius: 1.3333vmin;
        }

        // 被选中的样式
        .yun-ok {
            background-color: rgba(0, 195, 255, 0.139);
        }

        // 选中爱情的样式单独设置
        .yun-ok-love {
            background-color: rgba(255, 92, 203, 0.148);
        }
    }
}

// 幸运匹配
.Lucky-Match {
    display: flex;
    justify-content: space-around;
    width: 89.2vmin;
    height: 23.4667vmin;
    margin: 5.3333vmin auto 0 auto;
    animation: tit 5.5s;

    // 幸运颜色
    .Lucky-Color {
        display: flex;
        flex-direction: column;
        justify-content: space-evenly;
        align-items: center;
        width: 24.9333vmin;
        height: 100%;
        border: .2667vmin dashed #00a7d7;
        border-radius: 2.2667vmin;
        animation: tit 5.6s;

        h2 {
            font-size: 5.6vmin;
            font-weight: 800;
            color: #fff;
            letter-spacing: .6667vmin;
        }

        span {
            font-size: 2.1333vmin;
            font-family: Microsoft YaHei, Microsoft YaHei-Normal;
            font-weight: normal;
            color: #02abe7;
            letter-spacing: .4vmin;
        }
    }

    // 幸运数字
    .Lucky-Num {
        display: flex;
        flex-direction: column;
        justify-content: space-evenly;
        align-items: center;
        width: 24.9333vmin;
        height: 100%;
        border: .2667vmin dashed #00D79F;
        border-radius: 2.2667vmin;
        animation: tit 5.7s;

        h2 {
            font-size: 5.6vmin;
            font-weight: 800;
            color: #fff;
            letter-spacing: .6667vmin;
        }

        span {
            font-size: 2.1333vmin;
            font-family: Microsoft YaHei, Microsoft YaHei-Normal;
            font-weight: normal;
            color: #02E7CD;
            letter-spacing: .4vmin;
        }
    }

    // 速配星座
    .Speed-sky {
        display: flex;
        flex-direction: column;
        justify-content: space-evenly;
        align-items: center;
        width: 24.9333vmin;
        height: 100%;
        border: .2667vmin dashed #D7B900;
        border-radius: 2.2667vmin;
        animation: tit 5.8s;

        h2 {
            font-size: 5.6vmin;
            font-weight: 800;
            color: #fff;
            letter-spacing: .6667vmin;
        }

        span {
            font-size: 2.1333vmin;
            font-family: Microsoft YaHei, Microsoft YaHei-Normal;
            font-weight: normal;
            color: #E7E102;
            letter-spacing: .4vmin;
        }
    }
}

// 注意事项
.careful {
    display: flex;
    justify-content: space-around;
    margin: 5.3333vmin auto 0 auto;
    width: 86.4vmin;
    height: 29.8667vmin;

    // 适宜
    .y {
        display: flex;
        flex-direction: column;
        justify-content: start;
        align-items: center;
        width: 39.0667vmin;
        height: 100%;
        border: .2667vmin dashed #03ff00;
        border-radius: 1.4667vmin;
        animation: tit 6s;

        h2 {
            margin-top: 4.8vmin;
            font-size: 6.4vmin;
            font-family: Microsoft YaHei, Microsoft YaHei-Bold;
            color: #00d515;
            letter-spacing: .6667vmin;
        }

        span {
            margin-top: 1.8667vmin;
            font-size: 2.9333vmin;
            font-family: Microsoft YaHei, Microsoft YaHei-Normal;
            color: #ffffff;
            line-height: 8.9333vmin;
            letter-spacing: .6667vmin;
        }
    }

    // 忌讳
    .j {
        display: flex;
        flex-direction: column;
        justify-content: start;
        align-items: center;
        width: 39.0667vmin;
        height: 100%;
        border: .2667vmin dashed #FF4300;
        border-radius: 1.4667vmin;
        animation: tit 7s;

        h2 {
            margin-top: 4.8vmin;
            font-size: 6.4vmin;
            font-family: Microsoft YaHei, Microsoft YaHei-Bold;
            color: #D54000;
            letter-spacing: .6667vmin;
        }

        span {
            margin-top: 1.8667vmin;
            font-size: 2.9333vmin;
            font-family: Microsoft YaHei, Microsoft YaHei-Normal;
            color: #ffffff;
            line-height: 8.9333vmin;
            letter-spacing: .6667vmin;
        }
    }
}